<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="product" content="Metro UI CSS Framework">
    <meta name="description" content="Simple responsive css framework">
    <meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">

    <!-- Metro UI CSS -->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="css/iconFont.css" rel="stylesheet">
    <!------------------>

    <link href="css/docs.css" rel="stylesheet">
    <link href="js/prettify/prettify.css" rel="stylesheet">

    <!-- Load JavaScript Libraries -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <script src="js/jquery/jquery.mousewheel.js"></script>
    <script src="js/prettify/prettify.js"></script>

    <!-- Metro UI CSS JavaScript plugins -->
    <script src="js/load-metro.js"></script>

    <!-- Local JavaScript -->
    <script src="js/docs.js"></script>
    <script src="js/github.info.js"></script>

    <title>Metro UI CSS : Grid</title>
</head>
<body class="metro">
    <header class="bg-dark" data-load="header.html"></header>
    <div class="container">


                <h1>
                    <a href="/"><i class="icon-arrow-left-3 fg-darker smaller"></i></a>
                    Grid<small class="on-right">system</small>
                </h1>

                <p id="_general" class="description">
                    The default Metro UI CSS grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without responsive features enabled.
                    With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport.
                    Below 767px viewports, the columns become fluid and stack vertically.
                </p>

                    <div class="grid show-grid">
                        <div class="row">
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                        </div>

                        <div class="row">
                            <div class="span2">span2</div>
                            <div class="span3">span3</div>
                            <div class="span7">span7</div>
                        </div>

                        <div class="row">
                            <div class="span12">span12</div>
                        </div>
                    </div>

                <h3 id="_basic">Basic grid HTML</h3>
                <p>
                    For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns.
                    As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
                </p>

<pre class="prettyprint linenums">
&lt;div class="grid"&gt;
    &lt;div class="row"&gt;
        &lt;div class="span4"&gt;...&lt;/div&gt;
        &lt;div class="span8"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>

                <p class="description">
                    Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.
                </p>

                <h3 id="_offsetting">Offsetting columns</h3>
                <p class="description">
                    Move columns to the right using <code>.offset*</code> classes.
                    Each class increases the left margin of a column by a whole column.
                    For example, <code>.offset4</code> moves <code>.span4</code> over four columns.
                </p>

                    <div class="grid show-grid">
                        <div class="row">
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                        </div>
                        <div class="row">
                            <div class="span4">4</div>
                            <div class="span3 offset2">3 offset 2</div>
                        </div>
                        <div class="row">
                            <div class="span3 offset1">3 offset 1</div>
                            <div class="span3 offset2">3 offset 2</div>
                        </div>
                        <div class="row">
                            <div class="span6 offset3">6 offset 3</div>
                        </div>
                    </div>

                <h3 id="_nesting">Nesting columns</h3>
                <p>
                    To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.
                    Nested rows should include a set of columns that add up to the number of columns of its parent.
                </p>

                    <div class="grid show-grid">
                        <div class="row">
                            <div class="span12">
                                level 1 column
                                <div class="row">
                                    <div class="span2">level 2</div>
                                    <div class="span6">level 2</div>
                                    <div class="span4">level 2</div>
                                </div>
                            </div>
                        </div>
                    </div>

<pre class="prettyprint linenums">
 &lt;div class="grid"&gt;
     &lt;div class="row"&gt;
         &lt;div class="span9"&gt;
            level 1 column
             &lt;div class="row"&gt;
                 &lt;div class="span6" &gt;level 2 &lt;/div&gt;
                 &lt;div class="span3" &gt;level 2 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;
</pre>
                <h3>Fluid Grid</h3>
                <div class="example">
                    <div class="grid fluid show-grid">
                        <div class="row">
                            <div class="span1">1</div>
                            <div class="span1">2</div>
                            <div class="span1">3</div>
                            <div class="span1">4</div>
                            <div class="span1">5</div>
                            <div class="span1">6</div>
                            <div class="span1">7</div>
                            <div class="span1">8</div>
                            <div class="span1">9</div>
                            <div class="span1">10</div>
                            <div class="span1">11</div>
                            <div class="span1">12</div>
                        </div>

                        <div class="row">
                            <div class="span2">1</div>
                            <div class="span2">2</div>
                            <div class="span2">3</div>
                            <div class="span2">4</div>
                            <div class="span2">5</div>
                            <div class="span2">6</div>
                        </div>

                        <div class="row">
                            <div class="span2 offset2">2</div>
                            <div class="span2">3</div>
                            <div class="span2">4</div>
                            <div class="span2">5</div>
                            <div class="span2">6</div>
                        </div>

                    </div>
                </div>
<pre class="prettyprint linenums">
&lt;div class="grid fluid"&gt;
...
&lt;/div&gt;
</pre>

    </div>

    <script src="js/hitua.js"></script>

</body>
</html>